{% extends 'base/base.html' %}
{% load static %}
{% block head %}
    <link rel="stylesheet" href="{% static 'css/list.css' %}">
{% endblock %}
{% block main %}
    <!-- 条件筛选 -->
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">
                {#                <template>#}
                {#                    <el-tabs value="all" @tab-click="handleClick">#}
                {#                        <el-tab-pane label="全部" name="all">全部</el-tab-pane>#}
                {#                        <el-tab-pane label="男生" name="schoolboy">男生</el-tab-pane>#}
                {#                        <el-tab-pane label="女生" name="schoolgirl">女生</el-tab-pane>#}
                {#                    </el-tabs>#}
                {#                </template>#}
                {#                <el-divider></el-divider>#}
                <!-- 分类 -->
                <div><b>分类</b></div>
                <el-link :underline="false" class="current">全部</el-link>
                <el-link :underline="false" :sort_id="nav.column_link ? nav.column_link:nav.uuid" v-for="nav in navList"><span v-text="nav.column_name"></span></el-link>
                <el-divider></el-divider>
                <div><b>状态</b></div>
                <el-link :underline="false" class="current">全部</el-link>
                <el-link :underline="false" location="{% url 'web_system:serializeList' %}">连载</el-link>
                <el-link :underline="false" location="{% url 'web_system:overList' %}">完本</el-link>
                <el-divider></el-divider>
                {#                <div><b>属性</b></div>#}
                {#                <el-link :underline="false" class="current">全部</el-link>#}
                {#                <el-link :underline="false">免费</el-link>#}
                {#                <el-link :underline="false">付费</el-link>#}
            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content bg-purple">
                <div class="list">
                    <el-link :underline="false" class="current">综合</el-link>
                    <el-link :underline="false">点击</el-link>
                    <el-link :underline="false">时间</el-link>
                    <el-divider></el-divider>
                    <div class="book_list">
                        <ul>
                            <li v-for="data in page_data.novelList">
                                <div class="book_img">
                                    <el-link :underline="false" :data-id="data.uuid" target="_blank">
                                        <el-image style="width: 100%;" :alt="data.novel_name" :src="data.novel_img"></el-image>
                                    </el-link>
                                </div>
                                <div class="book_info">
                                    <h3>
                                        <el-link :underline="false" target="_blank" :data-id="data.uuid"><span v-text="data.novel_name"></span></el-link>
                                    </h3>
                                    <h4 v-text="data.novel_author"></h4>
                                    <p class="tag"><span class="org" v-text="data.categories"></span><span class="red" v-text="data.novel_state?'已完结':'连载中'"></span><span
                                            class="blue" v-text="data.novel_words"></span></p>
                                    <p class="intro" v-text="data.novel_description.slice(0, 35)"></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="page">
                        <el-pagination background layout="prev, pager, next" :total="page_data.num_pages*10" :current-page="page_data.currentPage"
                                       @current-change="current_change"></el-pagination>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
    </el-row>
{% endblock %}

{% block script %}
    <script>
        var sort_id = "{{ uid }}";
        var Main = {
            data() {
                return {
                    title:'',
                    keywords:'',
                    description:'',
                    search: {
                        key: ''
                    },
                    navList: [],
                    column_display: [],
                    page_data: {},
                };
            },
            methods: {
                handleNavSelect: function (key, keyPath) {
                    handleNavSelect(key, keyPath)
                },
                handSearch: function () {
                    var key = this.search.key;
                    console.log(key)
                },//, handleClick: function () {}
                current_change: function (currentPage) {
                    var param = {'page_size': 10, 'uid': sort_id, 'page': currentPage},
                        result = ajax(this, 'GET', param, '{% url "web_api:sortNovel" %}');
                    if (result.code === 0) {
                        this.page_data = result.data;
                    }
                }
            },
            mounted() {
                result = ajax(this, 'GET', {'parse': 'all'}, '{% url "web_api:navigation" %}');
                if (result.code === 0) {
                    this.navList = result.nav_all;
                    this.column_display = result.column_display;
                }
                result = ajax(this, 'GET', {'uid': sort_id}, '{% url "web_api:sortNovel" %}');
                if (result.code === 0) {
                    this.page_data = result.data;
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app')
    </script>
{% endblock %}



